<template>
  <div class="app-container drone-mission-container">
    <!-- 顶部装饰条 -->
    <div class="tech-header-glow"></div>

    <div class="tech-main-container">
      <!-- 页面标题 -->
      <div class="page-header">
        <h1 class="page-title">无人机智能巡田系统</h1>
        <p class="page-subtitle">AI驱动的精准农业病虫害监测与防控 - 集成卫星气象数据</p>
        <div class="header-glow"></div>
      </div>

      <!-- 环境监测中心横条 -->
      <div class="tech-card environment-bar">
        <div class="card-header-tech">
          <div class="header-content">
            <div class="title-section">
              <i class="el-icon-cloudy title-icon"></i>
              <h3 class="card-title">环境监测中心</h3>
            </div>
            <div class="environment-actions">
              <el-select
                v-model="selectedLocation"
                placeholder="选择监测区域"
                size="mini"
                class="location-select"
                @change="handleLocationChange"
              >
                <el-option
                  v-for="location in locationOptions"
                  :key="location.value"
                  :label="location.label"
                  :value="location.value"
                />
              </el-select>
              <el-button
                class="refresh-btn-tech"
                type="text"
                @click="refreshEnvironmentData"
                :loading="environmentLoading"
              >
                <i class="el-icon-refresh"></i>
                刷新数据
              </el-button>
            </div>
          </div>
        </div>

        <div class="card-content">
          <div class="environment-content">
            <!-- 左侧：气象数据 -->
            <div class="weather-section">
              <div v-if="weatherData" class="weather-main">
                <div class="temperature-display">
                  <div class="temperature-value">{{ Math.round(weatherData.temperature) }}°C</div>
                  <div class="weather-description">
                    <div class="comfort-index">{{ weatherData.comfortIndex }}</div>
                    <div class="disaster-risk" :class="getRiskLevelClass(weatherData.disasterRisk)">
                      {{ weatherData.disasterRisk }}
                    </div>
                  </div>
                </div>

                <div class="weather-details">
                  <div class="weather-item">
                    <i class="el-icon-heavy-rain weather-icon"></i>
                    <div class="weather-info">
                      <div class="weather-label">湿度</div>
                      <div class="weather-value">{{ Math.round(weatherData.humidity) }}%</div>
                    </div>
                  </div>
                  <div class="weather-item">
                    <i class="el-icon-wind weather-icon"></i>
                    <div class="weather-info">
                      <div class="weather-label">风速</div>
                      <div class="weather-value">{{ weatherData.windSpeed }} m/s</div>
                    </div>
                  </div>
                  <div class="weather-item">
                    <i class="el-icon-umbrella weather-icon"></i>
                    <div class="weather-info">
                      <div class="weather-label">降雨量</div>
                      <div class="weather-value">{{ weatherData.rainfall }} mm</div>
                    </div>
                  </div>
                  <div class="weather-item">
                    <i class="el-icon-sunny weather-icon"></i>
                    <div class="weather-info">
                      <div class="weather-label">紫外线</div>
                      <div class="weather-value">{{ weatherData.uvIndex }} 级</div>
                    </div>
                  </div>
                </div>

                <!-- 环境指标 -->
                <div class="environment-indicators">
                  <div class="env-indicator">
                    <div class="indicator-label">土壤湿度</div>
                    <el-progress
                      :percentage="Math.round(weatherData.soilMoisture)"
                      :color="getSoilMoistureColor(weatherData.soilMoisture)"
                      :show-text="false"
                      class="indicator-progress"
                    />
                    <span class="indicator-value">{{ Math.round(weatherData.soilMoisture) }}%</span>
                  </div>
                  <div class="env-indicator">
                    <div class="indicator-label">空气质量</div>
                    <div class="aqi-indicator" :class="getAQIClass(weatherData.aqi)">
                      AQI: {{ weatherData.aqi }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="weather-loading">
                <i class="el-icon-loading"></i>
                <div>加载气象数据...</div>
              </div>
            </div>

            <!-- 分隔线 -->
            <div class="divider"></div>

            <!-- 右侧：灾害预警 -->
            <div class="alerts-section">
              <h4 class="section-subtitle">灾害预警</h4>
              <div v-if="disasterAlerts && disasterAlerts.length > 0" class="alerts-container">
                <div v-for="alert in disasterAlerts" :key="alert.id" class="alert-item" :class="getAlertLevelClass(alert.level)">
                  <div class="alert-header">
                    <div class="alert-type">{{ alert.type }}</div>
                    <div class="alert-level" :class="getAlertLevelClass(alert.level)">{{ alert.level }}</div>
                  </div>
                  <div class="alert-content">
                    <div class="alert-location">
                      <i class="el-icon-location"></i>
                      {{ alert.location }}
                    </div>
                    <div class="alert-description">{{ alert.description }}</div>
                    <div class="alert-time">
                      {{ alert.startTime }} - {{ alert.endTime }}
                    </div>
                  </div>
                </div>
              </div>
              <div v-else class="no-alerts">
                <div class="empty-state">
                  <i class="el-icon-success empty-icon"></i>
                  <div class="empty-text">暂无灾害预警</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <el-row :gutter="25">
        <!-- 左侧控制面板 -->
        <el-col :span="8">
          <!-- 无人机状态卡片 -->
          <div class="tech-card status-card">
            <div class="card-header-tech">
              <div class="header-content">
                <div class="title-section">
                  <i class="el-icon-monitor title-icon"></i>
                  <h3 class="card-title">无人机控制中心</h3>
                </div>
                <el-button class="help-btn-tech" type="text" @click="showDroneHelp">
                  <i class="el-icon-question"></i>
                  使用说明
                </el-button>
              </div>
            </div>

            <div class="card-content">
              <!-- 服务连接测试 -->
              <div class="test-section">
                <h4 class="section-subtitle">服务连接测试</h4>
                <div class="test-buttons">
                  <el-button
                    class="tech-primary-btn"
                    @click="testConnection"
                    :loading="testingConnection"
                    size="mini"
                  >
                    <i class="el-icon-connection"></i>
                    测试无人机服务连接
                  </el-button>
                  <el-button
                    class="tech-secondary-btn"
                    @click="testDroneStatus"
                    size="mini"
                  >
                    <i class="el-icon-cpu"></i>
                    测试状态获取
                  </el-button>
                </div>
              </div>

              <!-- 无人机状态 -->
              <div class="drone-status-tech">
                <h4 class="section-subtitle">无人机状态</h4>
                <div class="status-grid">
                  <div class="status-item">
                    <div class="status-icon">
                      <i class="el-icon-link" :class="{ connected: droneStatus.connected }"></i>
                    </div>
                    <div class="status-info">
                      <div class="status-label">连接状态</div>
                      <div class="status-value" :class="{ connected: droneStatus.connected }">
                        {{ droneStatus.connected ? '已连接' : '未连接' }}
                      </div>
                    </div>
                  </div>

                  <div class="status-item">
                    <div class="status-icon">
                      <i class="el-icon-battery" :class="batteryLevel"></i>
                    </div>
                    <div class="status-info">
                      <div class="status-label">电池电量</div>
                      <div class="battery-display">
                        <el-progress
                          :percentage="droneStatus.battery"
                          :color="batteryColor"
                          :show-text="false"
                          class="battery-progress"
                        />
                        <span class="battery-percent">{{ droneStatus.battery }}%</span>
                      </div>
                    </div>
                  </div>

                  <div class="status-item">
                    <div class="status-icon">
                      <i class="el-icon-place"></i>
                    </div>
                    <div class="status-info">
                      <div class="status-label">GPS信号</div>
                      <div class="gps-signal">
                        <div class="signal-bars">
                          <div v-for="n in 4" :key="n"
                               class="signal-bar"
                               :class="{ active: n <= droneStatus.gps_signal }"
                          ></div>
                        </div>
                        <span class="signal-value">{{ droneStatus.gps_signal }}/4</span>
                      </div>
                    </div>
                  </div>

                  <div class="status-item">
                    <div class="status-icon">
                      <i class="el-icon-odometer"></i>
                    </div>
                    <div class="status-info">
                      <div class="status-label">飞行高度</div>
                      <div class="status-value">{{ droneStatus.altitude || 0 }}m</div>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 任务控制 -->
              <div class="mission-control-tech">
                <h4 class="section-subtitle">任务控制</h4>
                <div class="control-buttons">
                  <el-button
                    class="glow-button connect-btn"
                    :loading="connecting"
                    @click="handleConnectDrone"
                    :class="{ connected: droneStatus.connected }"
                  >
                    <i class="el-icon-connection"></i>
                    {{ droneStatus.connected ? '已连接' : '连接无人机' }}
                  </el-button>

                  <el-button
                    class="reset-button disconnect-btn"
                    :disabled="!droneStatus.connected"
                    @click="handleDisconnectDrone"
                  >
                    <i class="el-icon-disconnect"></i>
                    断开连接
                  </el-button>
                </div>

                <el-divider class="tech-divider"></el-divider>

                <el-form :model="missionForm" label-width="100px" size="small" class="mission-form">
                  <el-form-item label="农田面积" class="form-item-tech">
                    <el-input-number
                      v-model="missionForm.field_area"
                      :min="1"
                      :max="1000"
                      controls-position="right"
                      class="tech-input-field"
                    >
                      <template slot="append">亩</template>
                    </el-input-number>
                  </el-form-item>

                  <el-form-item label="飞行高度" class="form-item-tech">
                    <el-slider
                      v-model="missionForm.flight_height"
                      :min="20"
                      :max="100"
                      :step="10"
                      show-stops
                      show-input
                      class="tech-slider"
                    />
                  </el-form-item>

                  <el-form-item label="监测密度" class="form-item-tech">
                    <el-radio-group v-model="missionForm.monitoring_density" class="tech-radio-group">
                      <el-radio label="low" class="tech-radio">低密度</el-radio>
                      <el-radio label="medium" class="tech-radio">中密度</el-radio>
                      <el-radio label="high" class="tech-radio">高密度</el-radio>
                    </el-radio-group>
                  </el-form-item>

                  <!-- 新增：位置信息 -->
                  <el-form-item label="农田位置" class="form-item-tech">
                    <el-input
                      v-model="missionForm.field_location"
                      placeholder="请输入经纬度，如：116.3974,39.9093"
                      class="tech-input-field"
                    >
                      <template slot="append">
                        <el-button @click="getCurrentLocation" type="text" size="mini">
                          <i class="el-icon-location"></i>
                        </el-button>
                      </template>
                    </el-input>
                  </el-form-item>
                </el-form>

                <!-- 飞行适宜性评估 -->
                <div class="flight-suitability" v-if="flightSuitability">
                  <h4 class="section-subtitle">飞行适宜性评估</h4>
                  <div class="suitability-card" :class="flightSuitability.suitable ? 'suitable' : 'not-suitable'">
                    <div class="suitability-icon">
                      <i class="el-icon-success" v-if="flightSuitability.suitable"></i>
                      <i class="el-icon-warning" v-else></i>
                    </div>
                    <div class="suitability-content">
                      <div class="suitability-status">
                        {{ flightSuitability.suitable ? '适宜飞行' : '不适宜飞行' }}
                      </div>
                      <div class="suitability-reasons" v-if="flightSuitability.reasons && flightSuitability.reasons.length > 0">
                        <div v-for="(reason, index) in flightSuitability.reasons" :key="index" class="reason-item">
                          • {{ reason }}
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <div class="mission-buttons">
                  <el-button
                    class="glow-button start-btn"
                    :loading="missionLoading"
                    :disabled="!droneStatus.connected || missionActive || (flightSuitability && !flightSuitability.suitable)"
                    @click="handleStartMission"
                  >
                    <i class="el-icon-video-play"></i>
                    {{ missionActive ? '任务进行中' : '开始巡田任务' }}
                  </el-button>

                  <el-button
                    class="tech-warning-btn stop-btn"
                    :disabled="!missionActive"
                    @click="handleStopMission"
                  >
                    <i class="el-icon-video-pause"></i>
                    停止任务
                  </el-button>
                </div>
              </div>
            </div>
          </div>

          <!-- 实时统计 -->
          <div class="tech-card stats-card">
            <div class="card-header-tech">
              <div class="header-content">
                <div class="title-section">
                  <i class="el-icon-data-analysis title-icon"></i>
                  <h3 class="card-title">实时统计</h3>
                </div>
                <div class="stats-time">实时更新</div>
              </div>
            </div>

            <div class="card-content">
              <div class="stats-grid">
                <div class="stat-item-tech">
                  <div class="stat-icon">
                    <i class="el-icon-picture"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ missionStats.total_images || 0 }}</div>
                    <div class="stat-label">采集图像</div>
                  </div>
                </div>
                <div class="stat-item-tech">
                  <div class="stat-icon">
                    <i class="el-icon-aim"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ missionStats.total_detections || 0 }}</div>
                    <div class="stat-label">检测目标</div>
                  </div>
                </div>
                <div class="stat-item-tech">
                  <div class="stat-icon">
                    <i class="el-icon-map-location"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ missionStats.coverage || 0 }}%</div>
                    <div class="stat-label">覆盖进度</div>
                  </div>
                </div>
                <div class="stat-item-tech">
                  <div class="stat-icon">
                    <i class="el-icon-time"></i>
                  </div>
                  <div class="stat-content">
                    <div class="stat-value">{{ Math.floor(currentDuration / 60) }}</div>
                    <div class="stat-label">飞行时间(分)</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-col>

        <!-- 右侧监控面板 -->
        <el-col :span="16">
          <!-- 任务监控 -->
          <div class="tech-card monitor-card">
            <div class="card-header-tech">
              <div class="header-content">
                <div class="title-section">
                  <i class="el-icon-monitor title-icon"></i>
                  <h3 class="card-title">任务监控</h3>
                </div>
                <el-button
                  class="refresh-btn-tech"
                  type="text"
                  @click="refreshMissionStatus"
                  :loading="statusLoading"
                >
                  <i class="el-icon-refresh"></i>
                  刷新状态
                </el-button>
              </div>
            </div>

            <div class="card-content">
              <!-- 天气警告显示 -->
              <div v-if="missionStatus && missionStatus.weather_warning" class="weather-alert-tech">
                <div class="alert-content">
                  <i class="el-icon-warning alert-icon"></i>
                  <div class="alert-text">
                    <div class="alert-title">天气警告</div>
                    <div class="alert-desc">{{ missionStatus.weather_warning }}</div>
                  </div>
                </div>
              </div>

              <!-- 任务状态 -->
              <div v-if="missionActive" class="mission-active-tech">
                <div class="mission-alert">
                  <div class="alert-content">
                    <i class="el-icon-success alert-icon"></i>
                    <div class="alert-text">
                      <div class="alert-title">任务进行中</div>
                      <div class="alert-desc">无人机正在执行巡田任务，请保持连接...</div>
                    </div>
                  </div>
                  <div class="mission-timer">
                    <i class="el-icon-timer"></i>
                    {{ missionDuration }}
                  </div>
                </div>

                <!-- 实时检测结果 -->
                <div class="realtime-results-tech">
                  <h4 class="section-subtitle">最新检测结果</h4>
                  <div v-if="latestDetection" class="detection-result-tech">
                    <div class="detection-image-tech">
                      <img
                        v-if="latestDetection.result_image_base64"
                        :src="'data:image/jpeg;base64,' + latestDetection.result_image_base64"
                        class="result-image"
                      />
                      <div class="image-overlay-tech">
                        <div class="detection-count-badge">
                          <i class="el-icon-aim"></i>
                          {{ latestDetection.detection_count || 0 }} 个目标
                        </div>
                      </div>
                    </div>
                    <div class="detection-info-tech">
                      <div class="info-card">
                        <h5>检测信息</h5>
                        <div class="info-grid">
                          <div class="info-item">
                            <span class="info-label">推理时间:</span>
                            <span class="info-value">{{ latestDetection.inference_time || 0 }}秒</span>
                          </div>
                          <div class="info-item">
                            <span class="info-label">检测置信度:</span>
                            <span class="info-value">{{ (latestDetection.confidence * 100).toFixed(1) || 0 }}%</span>
                          </div>
                          <div class="info-item">
                            <span class="info-label">时间戳:</span>
                            <span class="info-value">{{ formatTime(latestDetection.timestamp) }}</span>
                          </div>
                          <div class="info-item">
                            <span class="info-label">位置坐标:</span>
                            <span class="info-value">{{ latestDetection.coordinates || 'N/A' }}</span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div v-else class="no-data-tech">
                    <div class="empty-state">
                      <i class="el-icon-picture-outline empty-icon"></i>
                      <div class="empty-text">等待检测数据...</div>
                    </div>
                  </div>
                </div>

                <!-- 病虫害分布 -->
                <div class="pest-distribution-tech">
                  <h4 class="section-subtitle">病虫害分布</h4>
                  <el-table
                    :data="pestDistributionData"
                    class="tech-table"
                    size="small"
                  >
                    <el-table-column prop="pest" label="病虫害类型" width="180">
                      <template slot-scope="scope">
                        <div class="pest-type">
                          <i class="el-icon-warning-outline pest-icon"></i>
                          {{ scope.row.pest }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="count" label="检测数量" sortable width="100">
                      <template slot-scope="scope">
                        <div class="count-badge" :class="getCountLevel(scope.row.count)">
                          {{ scope.row.count }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column prop="percentage" label="占比" width="100">
                      <template slot-scope="scope">
                        <div class="percentage-bar">
                          <div class="percentage-fill" :style="{ width: scope.row.percentage }"></div>
                          <span class="percentage-text">{{ scope.row.percentage }}</span>
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column label="威胁等级" width="120">
                      <template slot-scope="scope">
                        <el-tag
                          :type="getThreatType(scope.row.count)"
                          class="threat-tag"
                        >
                          {{ getThreatLevel(scope.row.count) }}
                        </el-tag>
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </div>

              <!-- 无任务状态 -->
              <div v-else class="mission-idle-tech">
                <div class="idle-state">
                  <div class="idle-icon">
                    <i class="el-icon-s-promotion"></i>
                  </div>
                  <div class="idle-content">
                    <h4>暂无进行中的任务</h4>
                    <p>连接无人机并开始新的巡田任务</p>
                    <el-button class="glow-button" @click="handleConnectDrone">
                      连接无人机开始任务
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 任务报告 -->
          <div class="tech-card report-card">
            <div class="card-header-tech">
              <div class="header-content">
                <div class="title-section">
                  <i class="el-icon-document title-icon"></i>
                  <h3 class="card-title">智能分析报告</h3>
                </div>
                <div class="report-actions">
                  <el-button
                    class="export-btn-tech"
                    type="text"
                    :disabled="!missionReport"
                    @click="exportReport"
                  >
                    <i class="el-icon-download"></i>
                    导出PDF
                  </el-button>
                  <el-button
                    class="share-btn-tech"
                    type="text"
                    :disabled="!missionReport"
                    @click="shareReport"
                  >
                    <i class="el-icon-share"></i>
                    分享报告
                  </el-button>
                </div>
              </div>
            </div>

            <div class="card-content">
              <div v-if="missionReport" class="mission-report-tech">
                <!-- 报告摘要 -->
                <div class="report-summary-tech">
                  <div class="summary-header">
                    <h4 class="section-subtitle">任务摘要</h4>
                    <div class="report-date">{{ formatTime(missionReport.end_time) }}</div>
                  </div>
                  <div class="summary-grid">
                    <div class="summary-item-tech">
                      <div class="summary-icon">
                        <i class="el-icon-picture"></i>
                      </div>
                      <div class="summary-content">
                        <div class="summary-value">{{ missionReport.summary.total_images_processed }}</div>
                        <div class="summary-label">处理图像</div>
                      </div>
                    </div>
                    <div class="summary-item-tech">
                      <div class="summary-icon">
                        <i class="el-icon-aim"></i>
                      </div>
                      <div class="summary-content">
                        <div class="summary-value">{{ missionReport.summary.total_pest_detections }}</div>
                        <div class="summary-label">检测目标</div>
                      </div>
                    </div>
                    <div class="summary-item-tech">
                      <div class="summary-icon">
                        <i class="el-icon-map-location"></i>
                      </div>
                      <div class="summary-content">
                        <div class="summary-value">{{ missionReport.summary.field_coverage }}%</div>
                        <div class="summary-label">农田覆盖</div>
                      </div>
                    </div>
                    <div class="summary-item-tech">
                      <div class="summary-icon">
                        <i class="el-icon-time"></i>
                      </div>
                      <div class="summary-content">
                        <div class="summary-value">{{ missionReport.summary.mission_duration }}</div>
                        <div class="summary-label">任务时长</div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 新增：环境条件分析 -->
                <div v-if="missionReport.current_weather_conditions" class="environment-section">
                  <h4 class="section-subtitle">环境条件分析</h4>
                  <div class="environment-grid">
                    <div class="env-metric">
                      <div class="env-label">任务期间天气</div>
                      <div class="env-value">
                        {{ Math.round(missionReport.current_weather_conditions.temperature) }}°C /
                        {{ Math.round(missionReport.current_weather_conditions.humidity) }}% /
                        {{ missionReport.current_weather_conditions.windSpeed }}m/s
                      </div>
                    </div>
                    <div class="env-metric">
                      <div class="env-label">舒适度指数</div>
                      <div class="env-value">{{ missionReport.current_weather_conditions.comfortIndex }}</div>
                    </div>
                    <div class="env-metric">
                      <div class="env-label">灾害风险</div>
                      <div class="env-value" :class="getRiskLevelClass(missionReport.current_weather_conditions.disasterRisk)">
                        {{ missionReport.current_weather_conditions.disasterRisk }}
                      </div>
                    </div>
                    <div class="env-metric">
                      <div class="env-label">土壤湿度</div>
                      <div class="env-value">{{ Math.round(missionReport.current_weather_conditions.soilMoisture) }}%</div>
                    </div>
                  </div>
                </div>

                <!-- 虫情热力图 -->
                <div v-if="missionReport.heatmap" class="pest-heatmap-section">
                  <h4 class="section-subtitle">虫情分布热力图</h4>
                  <div class="heatmap-container">
                    <div class="heatmap-tech">
                      <div class="heatmap-grid">
                        <div
                          v-for="(cell, index) in missionReport.heatmap.data"
                          :key="index"
                          class="heatmap-cell"
                          :class="'level-' + cell.level"
                          @mouseenter="showHeatmapTooltip(cell, $event)"
                          @mouseleave="hideHeatmapTooltip"
                        >
                          <div class="cell-content">
                            <div class="cell-value">{{ cell.value }}</div>
                            <div class="cell-pest">{{ cell.mainPest }}</div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="heatmap-legend">
                      <div class="legend-title">虫情密度等级</div>
                      <div class="legend-items">
                        <div v-for="level in 5" :key="level" class="legend-item">
                          <div class="legend-color" :class="'level-' + level">
                            <span class="legend-level">L{{ level }}</span>
                          </div>
                          <div class="legend-label">
                            {{ ['无虫情', '轻微', '中等', '严重', '紧急'][level-1] }}
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>

                <!-- 详细分析 -->
                <div class="report-details">
                  <el-collapse v-model="activeReportItems" class="tech-collapse">
                    <el-collapse-item title="任务执行详情" name="1">
                      <div class="detail-content">
                        <div class="detail-item">
                          <span class="detail-label">任务ID:</span>
                          <span class="detail-value">{{ missionReport.mission_id }}</span>
                        </div>
                        <div class="detail-item">
                          <span class="detail-label">开始时间:</span>
                          <span class="detail-value">{{ formatTime(missionReport.start_time) }}</span>
                        </div>
                        <div class="detail-item">
                          <span class="detail-label">结束时间:</span>
                          <span class="detail-value">{{ formatTime(missionReport.end_time) }}</span>
                        </div>
                        <div class="detail-item">
                          <span class="detail-label">飞行路径:</span>
                          <span class="detail-value">{{ missionReport.summary.flight_path || '自动规划' }}</span>
                        </div>
                        <div class="detail-item">
                          <span class="detail-label">数据质量:</span>
                          <span class="detail-value">{{ missionReport.summary.data_quality || '优秀' }}</span>
                        </div>
                      </div>
                    </el-collapse-item>

                    <el-collapse-item title="病虫害分析" name="2">
                      <div class="pest-analysis">
                        <div class="analysis-chart">
                          <div class="chart-container">
                            <div class="pest-chart">
                              <div
                                v-for="pest in missionReport.pest_analysis"
                                :key="pest.name"
                                class="pest-bar"
                                :style="{ height: pest.percentage + '%' }"
                                :class="getPestLevel(pest.count)"
                              >
                                <div class="bar-value">{{ pest.count }}</div>
                                <div class="bar-label">{{ pest.name }}</div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div class="analysis-summary">
                          <h5>主要威胁</h5>
                          <div v-for="threat in missionReport.summary.main_pest_threats"
                               :key="threat.pest"
                               class="threat-item"
                          >
                            <span class="threat-name">{{ threat.pest }}</span>
                            <span class="threat-count">{{ threat.count }} 次</span>
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>

                    <!-- 新增：环境数据分析 -->
                    <el-collapse-item title="环境数据分析" name="4">
                      <div class="environment-analysis">
                        <div class="weather-stats" v-if="missionReport.weather_statistics">
                          <h5>气象统计数据</h5>
                          <div class="stats-grid">
                            <div class="stat-item">
                              <div class="stat-label">平均温度</div>
                              <div class="stat-value">{{ missionReport.weather_statistics.avgTemperature }}°C</div>
                            </div>
                            <div class="stat-item">
                              <div class="stat-label">总降雨量</div>
                              <div class="stat-value">{{ missionReport.weather_statistics.totalRainfall.toFixed(1) }}mm</div>
                            </div>
                            <div class="stat-item">
                              <div class="stat-label">降雨天数</div>
                              <div class="stat-value">{{ missionReport.weather_statistics.rainyDays }}天</div>
                            </div>
                            <div class="stat-item">
                              <div class="stat-label">灾害次数</div>
                              <div class="stat-value">{{ missionReport.weather_statistics.disasterCount }}次</div>
                            </div>
                          </div>
                        </div>

                        <div class="risk-assessment" v-if="missionReport.risk_assessment">
                          <h5>环境风险评估</h5>
                          <div class="risk-level" :class="getRiskLevelClass(missionReport.risk_assessment.risk_level_text)">
                            {{ missionReport.risk_assessment.risk_level_text }}
                          </div>
                          <div class="risk-factors">
                            <div v-for="factor in missionReport.risk_assessment.risk_factors"
                                 :key="factor" class="risk-factor">
                              • {{ factor }}
                            </div>
                          </div>
                          <div class="risk-assessment-text">
                            {{ missionReport.risk_assessment.overall_assessment }}
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>

                    <el-collapse-item title="农田健康评估" name="3">
                      <div class="health-assessment">
                        <div class="health-score">
                          <div class="score-circle" :style="healthScoreStyle">
                            <div class="score-value">{{ missionReport.summary.health_score || 85 }}</div>
                            <div class="score-label">健康评分</div>
                          </div>
                        </div>
                        <div class="health-factors">
                          <div class="factor-item">
                            <span class="factor-name">虫害指数</span>
                            <el-progress
                              :percentage="missionReport.summary.pest_index || 15"
                              :color="missionReport.summary.pest_index > 30 ? '#f56c6c' : '#67c23a'"
                            />
                          </div>
                          <div class="factor-item">
                            <span class="factor-name">病害指数</span>
                            <el-progress
                              :percentage="missionReport.summary.disease_index || 8"
                              :color="missionReport.summary.disease_index > 20 ? '#f56c6c' : '#67c23a'"
                            />
                          </div>
                          <div class="factor-item">
                            <span class="factor-name">生长状况</span>
                            <el-progress
                              :percentage="missionReport.summary.growth_index || 92"
                              color="#67c23a"
                            />
                          </div>
                        </div>
                      </div>
                    </el-collapse-item>
                  </el-collapse>
                </div>

                <!-- 防治建议 -->
                <div class="recommendations-tech">
                  <h4 class="section-subtitle">专家建议</h4>
                  <div v-if="missionReport.recommendations && missionReport.recommendations.length > 0" class="recommendations-grid">
                    <div v-for="(rec, index) in missionReport.recommendations"
                         :key="index"
                         class="recommendation-item"
                    >
                      <i class="el-icon-chat-dot-round rec-icon"></i>
                      <div class="rec-content">{{ rec }}</div>
                    </div>
                  </div>
                  <div v-else class="no-recommendations">
                    <i class="el-icon-success no-rec-icon"></i>
                    <div class="no-rec-text">当前农田健康状况良好，建议继续保持监测。</div>
                  </div>
                </div>
              </div>

              <div v-else class="no-report-tech">
                <div class="empty-state">
                  <i class="el-icon-document empty-icon"></i>
                  <div class="empty-text">暂无任务报告</div>
                  <p class="empty-desc">完成任务后将会生成详细报告</p>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 无人机帮助对话框 -->
    <el-dialog
      title="无人机使用说明"
      :visible.sync="helpDialogVisible"
      width="700px"
      class="tech-dialog"
    >
      <div class="help-content-tech">
        <h3>无人机巡田任务操作指南</h3>
        <el-steps direction="vertical" :active="5" class="tech-steps">
          <el-step title="连接无人机" description="确保无人机电源开启，GPS信号良好，然后点击连接按钮"></el-step>
          <el-step title="设置任务参数" description="根据农田实际情况设置面积、飞行高度和监测密度"></el-step>
          <el-step title="检查天气条件" description="系统会自动检查气象数据，确保适宜飞行"></el-step>
          <el-step title="开始任务" description="点击开始巡田任务，无人机将自动规划路径并开始飞行"></el-step>
          <el-step title="监控任务进度" description="实时查看检测结果、病虫害分布和任务统计信息"></el-step>
          <el-step title="结束任务" description="任务完成后点击停止，系统将生成详细的任务报告和防治建议"></el-step>
        </el-steps>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button class="glow-button" @click="helpDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 热力图提示框 -->
    <div v-if="heatmapTooltip.visible"
         class="heatmap-tooltip"
         :style="{ left: heatmapTooltip.x + 'px', top: heatmapTooltip.y + 'px' }"
    >
      <div class="tooltip-content">
        <div class="tooltip-title">区域虫情分析</div>
        <div class="tooltip-item">
          <span class="tooltip-label">虫情等级:</span>
          <span class="tooltip-value">{{ heatmapTooltip.data.levelText }}</span>
        </div>
        <div class="tooltip-item">
          <span class="tooltip-label">检测数量:</span>
          <span class="tooltip-value">{{ heatmapTooltip.data.value }} 个</span>
        </div>
        <div class="tooltip-item">
          <span class="tooltip-label">主要害虫:</span>
          <span class="tooltip-value">{{ heatmapTooltip.data.mainPest }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  connectDrone,
  disconnectDrone,
  startDroneMission,
  stopDroneMission,
  getMissionStatus,
  getDroneStatus,
  testConnection,
  testDroneStatus
} from "@/api/drone/mission";

// 新增卫星数据API
import {
  getRealTimeWeather,
  getDisasterAlerts,
  getWeatherStats
} from "@/api/satellite/weather";

export default {
  name: "DroneMission",
  data() {
    return {
      // 无人机状态
      droneStatus: {
        connected: false,
        battery: 0,
        gps_signal: 0,
        position: [0, 0, 0],
        altitude: 0,
        speed: 0
      },

      // 任务状态
      missionActive: false,
      missionStats: {
        total_images: 0,
        total_detections: 0,
        coverage: 0,
        pest_distribution: {}
      },

      // 任务表单
      missionForm: {
        field_area: 10,
        flight_height: 50,
        monitoring_density: 'medium',
        field_location: '116.3974,39.9093'
      },

      // 最新检测结果
      latestDetection: null,

      // 任务报告
      missionReport: null,

      // 加载状态
      connecting: false,
      missionLoading: false,
      statusLoading: false,
      environmentLoading: false,

      // 对话框
      helpDialogVisible: false,

      // 轮询定时器
      statusPolling: null,
      testingConnection: false,

      // 任务开始时间
      missionStartTime: null,
      // 任务持续时间定时器
      durationTimer: null,
      // 当前任务持续时间（秒）
      currentDuration: 0,

      // 报告展开项
      activeReportItems: ['1', '2', '3', '4'],

      // 热力图提示
      heatmapTooltip: {
        visible: false,
        x: 0,
        y: 0,
        data: null
      },

      // 连接错误计数
      connectionErrors: 0,

      // 新增：卫星气象数据
      weatherData: null,
      weatherWarning: null,

      // 灾害预警数据
      disasterAlerts: [],

      // 地区选择
      selectedLocation: 'default',
      locationOptions: [
        { value: 'default', label: '默认农田区域' },
        { value: 'north', label: '北部农田区' },
        { value: 'south', label: '南部农田区' },
        { value: 'east', label: '东部农田区' },
        { value: 'west', label: '西部农田区' }
      ]
    };
  },

  computed: {
    // 电池颜色
    batteryColor() {
      if (this.droneStatus.battery > 70) return '#00ff88';
      if (this.droneStatus.battery > 30) return '#ffcc00';
      return '#ff4444';
    },

    // 电池等级
    batteryLevel() {
      if (this.droneStatus.battery > 70) return 'high';
      if (this.droneStatus.battery > 30) return 'medium';
      return 'low';
    },

    // 病虫害分布数据
    pestDistributionData() {
      if (!this.missionStats.pest_distribution || Object.keys(this.missionStats.pest_distribution).length === 0) {
        return [];
      }

      const distribution = this.missionStats.pest_distribution;
      const total = this.missionStats.total_detections;

      return Object.entries(distribution).map(([pest, count]) => ({
        pest,
        count,
        percentage: total > 0 ? ((count / total) * 100).toFixed(1) + '%' : '0%'
      }));
    },

    // 任务持续时间
    missionDuration() {
      const hours = Math.floor(this.currentDuration / 3600).toString().padStart(2, '0');
      const minutes = Math.floor((this.currentDuration % 3600) / 60).toString().padStart(2, '0');
      const seconds = (this.currentDuration % 60).toString().padStart(2, '0');

      return `${hours}:${minutes}:${seconds}`;
    },

    // 健康评分样式
    healthScoreStyle() {
      const score = this.missionReport && this.missionReport.summary ? this.missionReport.summary.health_score : 85;
      const percentage = score;
      return {
        background: `conic-gradient(#00ff88 0% ${percentage}%, #6677aa ${percentage}% 100%)`
      };
    }
  },

  mounted() {
    this.initData();
    this.loadImageInfo();
  },

  beforeDestroy() {
    this.stopStatusPolling();
    this.stopDurationTimer();
  },

  methods: {
    async loadImageInfo() {
      try {
        const response = await getImagesInfo();
        if (response.code === 200) {
          this.imageInfo = response.data;
        }
      } catch (error) {
        console.error('加载图片信息失败:', error);
      }
    },

    // 测试连接
    async testConnection() {
      this.testingConnection = true;
      try {
        const response = await testConnection();
        if (response.code === 200) {
          this.$message.success('无人机服务连接正常');
        } else {
          this.$message.error('连接测试失败: ' + response.msg);
        }
      } catch (error) {
        this.$message.error('连接测试异常: ' + error.message);
      } finally {
        this.testingConnection = false;
      }
    },

    // 测试无人机状态
    async testDroneStatus() {
      try {
        const response = await testDroneStatus();
        if (response.code === 200) {
          this.$message.success('无人机状态获取成功');
        } else {
          this.$message.error('状态获取失败: ' + response.msg);
        }
      } catch (error) {
        this.$message.error('状态获取异常: ' + error.message);
      }
    },

    // 初始化数据
    initData() {
      this.loadDroneStatus();
      this.loadEnvironmentData();
    },

    // 加载环境数据（气象+灾害预警）
    async loadEnvironmentData() {
      this.environmentLoading = true;
      try {
        await Promise.all([
          this.loadWeatherData(),
          this.loadDisasterAlerts()
        ]);
        this.checkFlightSuitability();
      } catch (error) {
        console.error('加载环境数据失败:', error);
      } finally {
        this.environmentLoading = false;
      }
    },

    // 刷新环境数据
    async refreshEnvironmentData() {
      await this.loadEnvironmentData();
      this.$message.success('环境数据已刷新');
    },

    // 处理地区变更
    handleLocationChange() {
      this.loadEnvironmentData();
    },

    // 加载气象数据
    async loadWeatherData() {
      try {
        const location = this.selectedLocation || '默认农田区域';
        const response = await getRealTimeWeather({ location });
        if (response.code === 200) {
          this.weatherData = response.data;
          this.checkWeatherWarnings();
        } else {
          this.$message.error('获取气象数据失败: ' + response.msg);
        }
      } catch (error) {
        console.error('加载气象数据失败:', error);
      }
    },

    // 加载灾害预警
    async loadDisasterAlerts() {
      try {
        const response = await getDisasterAlerts();
        if (response.code === 200) {
          this.disasterAlerts = response.data;
        } else {
          this.$message.error('获取灾害预警失败: ' + response.msg);
        }
      } catch (error) {
        console.error('加载灾害预警失败:', error);
      }
    },

    // 检查飞行适宜性
    async checkFlightSuitability() {
      try {
        // 模拟飞行适宜性数据
        this.generateMockFlightSuitability();
      } catch (error) {
        console.error('检查飞行适宜性失败:', error);
      }
    },

    // 模拟飞行适宜性数据
    generateMockFlightSuitability() {
      if (!this.weatherData) return;

      const suitable = this.weatherData.windSpeed <= 10 &&
        this.weatherData.rainfall <= 15;

      const reasons = [];
      if (this.weatherData.windSpeed > 10) {
        reasons.push(`风速过大(${this.weatherData.windSpeed}m/s)`);
      }
      if (this.weatherData.rainfall > 15) {
        reasons.push(`降雨量过大(${this.weatherData.rainfall}mm)`);
      }

      this.flightSuitability = {
        suitable,
        reasons
      };
    },

    // 检查天气警告
    checkWeatherWarnings() {
      if (!this.weatherData) return;

      const warnings = [];
      const windSpeed = this.weatherData.windSpeed;
      const rainfall = this.weatherData.rainfall;

      if (windSpeed > 8) {
        warnings.push(`风速较大(${windSpeed}m/s)，请注意飞行安全`);
      }
      if (rainfall > 10) {
        warnings.push(`有降雨(${rainfall}mm)，可能影响图像质量`);
      }

      this.weatherWarning = warnings.length > 0 ? warnings.join('；') : null;
    },

    // 获取当前位置
    getCurrentLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (position) => {
            const longitude = position.coords.longitude;
            const latitude = position.coords.latitude;
            this.missionForm.field_location = `${longitude.toFixed(4)},${latitude.toFixed(4)}`;
            this.$message.success('已获取当前位置');
            this.loadEnvironmentData();
          },
          (error) => {
            this.$message.error('获取位置失败: ' + error.message);
          }
        );
      } else {
        this.$message.error('浏览器不支持地理位置服务');
      }
    },

    // 风险等级样式
    getRiskLevelClass(riskLevel) {
      const classMap = {
        '无': 'risk-none',
        '低风险': 'risk-low',
        '中风险': 'risk-medium',
        '高风险': 'risk-high'
      };
      return classMap[riskLevel] || 'risk-none';
    },

    // 预警等级样式
    getAlertLevelClass(level) {
      const classMap = {
        '低风险': 'alert-low',
        '中风险': 'alert-medium',
        '高风险': 'alert-high'
      };
      return classMap[level] || 'alert-low';
    },

    // 土壤湿度颜色
    getSoilMoistureColor(moisture) {
      if (moisture < 30) return '#f56c6c';
      if (moisture < 60) return '#e6a23c';
      return '#67c23a';
    },

    // 空气质量等级
    getAQIClass(aqi) {
      if (aqi <= 50) return 'aqi-good';
      if (aqi <= 100) return 'aqi-moderate';
      if (aqi <= 150) return 'aqi-unhealthy-sensitive';
      return 'aqi-unhealthy';
    },

    // 生成虫情热力图数据
    generateHeatmapData() {
      const pests = ['蚜虫', '红蜘蛛', '飞虱', '螟虫', '叶蝉'];
      const distribution = this.missionStats.pest_distribution || {};

      return Array.from({ length: 25 }, (_, index) => {
        const regionFactor = (index % 5) + 1;
        const baseCount = Object.values(distribution).reduce((sum, count) => sum + count, 0) || 10;
        const level = Math.min(5, Math.max(1, Math.floor((Math.random() * regionFactor) + 1)));
        const value = Math.floor((baseCount / 25) * level * 0.8) + Math.floor(Math.random() * 5);
        const mainPest = pests[Math.floor(Math.random() * pests.length)];

        return {
          level,
          value,
          mainPest,
          levelText: ['无虫情', '轻微', '中等', '严重', '紧急'][level-1]
        };
      });
    },

    // 显示热力图提示
    showHeatmapTooltip(cell, event) {
      this.heatmapTooltip = {
        visible: true,
        x: event.clientX + 10,
        y: event.clientY + 10,
        data: cell
      };
    },

    // 隐藏热力图提示
    hideHeatmapTooltip() {
      this.heatmapTooltip.visible = false;
    },

    // 获取数量等级
    getCountLevel(count) {
      if (count > 15) return 'high';
      if (count > 8) return 'medium';
      return 'low';
    },

    // 获取威胁类型
    getThreatType(count) {
      if (count > 15) return 'danger';
      if (count > 8) return 'warning';
      return 'success';
    },

    // 获取威胁等级
    getThreatLevel(count) {
      if (count > 15) return '严重';
      if (count > 8) return '中等';
      return '轻微';
    },

    // 获取害虫等级
    getPestLevel(count) {
      if (count > 15) return 'high';
      if (count > 8) return 'medium';
      return 'low';
    },

    // 格式化时间
    formatTime(timestamp) {
      if (!timestamp) return '未知';
      return new Date(timestamp).toLocaleString();
    },

    // 导出报告
    exportReport() {
      this.$message.success('任务报告导出功能开发中...');
    },

    // 分享报告
    shareReport() {
      this.$message.success('报告分享功能开发中...');
    },

    // 开始任务持续时间计时器
    startDurationTimer() {
      this.stopDurationTimer();
      this.currentDuration = 0;
      this.durationTimer = setInterval(() => {
        this.currentDuration++;
      }, 1000);
    },

    // 停止任务持续时间计时器
    stopDurationTimer() {
      if (this.durationTimer) {
        clearInterval(this.durationTimer);
        this.durationTimer = null;
      }
    },

    // 加载无人机状态
    async loadDroneStatus() {
      try {
        const response = await getDroneStatus();
        if (response.code === 200) {
          this.droneStatus = response.data.drone_status;
          this.missionActive = response.data.mission_active;
        }
      } catch (error) {
        console.error('加载无人机状态失败:', error);
      }
    },

    // 连接无人机
    async handleConnectDrone() {
      this.connecting = true;
      try {
        const response = await connectDrone();
        if (response.code === 200) {
          this.$message.success('无人机连接成功');
          this.droneStatus.connected = true;
          this.startStatusPolling();
        } else {
          this.$message.error('无人机连接失败: ' + response.msg);
        }
      } catch (error) {
        this.$message.error('连接失败: ' + error.message);
      } finally {
        this.connecting = false;
      }
    },

    // 断开无人机连接
    async handleDisconnectDrone() {
      try {
        const response = await disconnectDrone();
        if (response.code === 200) {
          this.$message.success('无人机断开成功');
          this.droneStatus.connected = false;
          this.stopStatusPolling();
          this.stopDurationTimer();
          this.missionActive = false;
        } else {
          this.$message.error('断开失败: ' + response.msg);
        }
      } catch (error) {
        this.$message.error('断开失败: ' + error.message);
      }
    },

    // 开始任务
    async handleStartMission() {
      if (!this.missionForm.field_area) {
        this.$message.warning('请输入农田面积');
        return;
      }

      if (this.flightSuitability && !this.flightSuitability.suitable) {
        this.$message.warning('当前环境条件不适宜飞行，请检查气象数据');
        return;
      }

      this.missionLoading = true;
      try {
        const missionParams = {
          ...this.missionForm,
          field_location: this.missionForm.field_location || '默认农田区域'
        };

        const response = await startDroneMission(missionParams);
        if (response.code === 200) {
          this.$message.success('任务启动成功');
          this.missionActive = true;
          this.missionReport = null;
          this.missionStartTime = new Date();
          this.connectionErrors = 0;

          this.missionStats = {
            total_images: 0,
            total_detections: 0,
            coverage: 0,
            pest_distribution: {}
          };

          this.startDurationTimer();
          this.startStatusPolling();

        } else {
          this.$message.error('任务启动失败: ' + response.msg);
        }
      } catch (error) {
        this.$message.error('启动失败: ' + error.message);
      } finally {
        this.missionLoading = false;
      }
    },

    // 停止任务
    async handleStopMission() {
      try {
        const stopResponse = await stopDroneMission();

        if (stopResponse.code === 200) {
          this.$message.success('任务停止成功');
          this.missionActive = false;
          this.stopStatusPolling();
          this.stopDurationTimer();

          this.generateMissionReport();
          await this.refreshMissionStatus();
        } else {
          this.$message.error('任务停止失败: ' + stopResponse.msg);
          this.generateMissionReport();
          this.missionActive = false;
          this.stopStatusPolling();
          this.stopDurationTimer();
        }
      } catch (error) {
        console.error('停止任务异常:', error);
        this.$message.error('停止失败: ' + (error.message || '网络错误'));
        this.generateMissionReport();
        this.missionActive = false;
        this.stopStatusPolling();
        this.stopDurationTimer();
      }
    },

    // 生成任务报告
    generateMissionReport() {
      const durationMinutes = Math.floor(this.currentDuration / 60);
      const durationSeconds = this.currentDuration % 60;
      const missionDuration = durationMinutes > 0 ?
        `${durationMinutes}分${durationSeconds}秒` :
        `${durationSeconds}秒`;

      const pestDistribution = this.missionStats.pest_distribution || {};
      const totalDetections = this.missionStats.total_detections || 0;

      const mainThreats = Object.entries(pestDistribution)
        .sort(([,a], [,b]) => b - a)
        .slice(0, 3)
        .map(([pest, count]) => ({ pest, count }));

      const pestDensity = totalDetections / (this.missionStats.total_images || 1);
      let healthScore = 100 - (pestDensity * 50);
      healthScore = Math.max(30, Math.min(100, Math.round(healthScore)));

      const pestIndex = Math.min(100, Math.round(pestDensity * 100));

      this.missionReport = {
        mission_id: `mission_${Date.now()}`,
        start_time: this.missionStartTime ? this.missionStartTime.toISOString() : new Date().toISOString(),
        end_time: new Date().toISOString(),
        summary: {
          total_images_processed: this.missionStats.total_images || 0,
          total_pest_detections: totalDetections,
          field_coverage: this.missionStats.coverage || 0,
          mission_duration: missionDuration,
          flight_path: '自动规划路径',
          data_quality: this.missionStats.total_images > 50 ? '优秀' : '良好',
          health_score: healthScore,
          pest_index: pestIndex,
          disease_index: Math.min(30, Math.round(pestIndex * 0.3)),
          growth_index: Math.max(60, 100 - pestIndex),
          main_pest_threats: mainThreats.length > 0 ? mainThreats : [
            { pest: '蚜虫', count: 0 },
            { pest: '红蜘蛛', count: 0 },
            { pest: '飞虱', count: 0 }
          ]
        },
        pest_analysis: Object.entries(pestDistribution).map(([name, count]) => ({
          name,
          count,
          percentage: totalDetections > 0 ? Math.round((count / totalDetections) * 100) : 0
        })),
        heatmap: {
          data: this.generateHeatmapData()
        },
        current_weather_conditions: this.weatherData,
        recommendations: this.generateRecommendations(healthScore, pestIndex, mainThreats)
      };

      this.loadEnvironmentalStats();
    },

    // 加载环境统计数据
    async loadEnvironmentalStats() {
      try {
        const location = this.missionForm.field_location || '默认农田区域';
        const response = await getWeatherStats({ location });
        if (response.code === 200) {
          this.missionReport.weather_statistics = response.data;
        }
      } catch (error) {
        console.error('加载环境统计数据失败:', error);
      }
    },

    // 生成防治建议
    generateRecommendations(healthScore, pestIndex, mainThreats) {
      const recommendations = [];

      if (healthScore >= 80) {
        recommendations.push("✅ 农田健康状况优秀，继续保持当前管理措施");
        recommendations.push("💧 建议定期监测，保持合理灌溉");
      } else if (healthScore >= 60) {
        recommendations.push("⚠️ 农田健康状况良好，需注意潜在威胁");
        recommendations.push("🔍 建议增加监测频率，及时发现病虫害");
      } else {
        recommendations.push("🚨 农田健康状况需要关注，建议采取防治措施");

        if (pestIndex > 30) {
          recommendations.push("🐛 虫害密度较高，建议在3-5天内进行药剂防治");
        }

        if (mainThreats.length > 0) {
          const mainPest = mainThreats[0].pest;
          recommendations.push(`🎯 重点防治${mainPest}，使用针对性药剂`);
        }
      }

      mainThreats.forEach(threat => {
        if (threat.count > 10) {
          switch(threat.pest) {
            case '蚜虫':
              recommendations.push("🌿 针对蚜虫：可使用吡虫啉或噻虫嗪进行防治");
              break;
            case '红蜘蛛':
              recommendations.push("🕷️ 针对红蜘蛛：建议使用阿维菌素或螺螨酯");
              break;
            case '飞虱':
              recommendations.push("🦗 针对飞虱：可使用噻嗪酮或吡蚜酮");
              break;
          }
        }
      });

      if (this.weatherData) {
        if (this.weatherData.soilMoisture < 30) {
          recommendations.push("💧 土壤湿度较低，建议适当灌溉");
        }
      }

      recommendations.push("🌱 建议增施有机肥，增强作物抗病虫害能力");
      recommendations.push("📊 建议7天后再次进行无人机巡田，评估防治效果");

      return recommendations;
    },

    // 显示帮助
    showDroneHelp() {
      this.helpDialogVisible = true;
    },

    // 启动状态轮询
    startStatusPolling() {
      this.stopStatusPolling();
      this.statusPolling = setInterval(async () => {
        if (this.missionActive) {
          try {
            await this.refreshMissionStatus();
          } catch (error) {
            console.error('轮询刷新失败:', error);
          }
        } else {
          this.stopStatusPolling();
        }
      }, 3000);

      this.refreshMissionStatus();
    },

    // 停止状态轮询
    stopStatusPolling() {
      if (this.statusPolling) {
        clearInterval(this.statusPolling);
        this.statusPolling = null;
      }
    },

    // 刷新任务状态
    async refreshMissionStatus() {
      if (!this.missionActive && !this.statusPolling) {
        return;
      }

      this.statusLoading = true;
      try {
        const response = await getMissionStatus();
        if (response.code === 200) {
          const data = response.data;

          this.missionActive = data.mission_active;
          this.missionStats = data.mission_stats || {};
          this.latestDetection = data.latest_detection;
          this.droneStatus = data.drone_status || {};
          this.missionStatus = data;

          const missionStatus = data.mission_status;
          if (missionStatus === 'completed' || !data.mission_active) {
            this.missionActive = false;
            this.stopStatusPolling();
            this.stopDurationTimer();

            await this.loadMissionReport();
            this.$message.success('巡田任务已完成');
          }

          this.connectionErrors = 0;
        } else {
          console.error('状态获取失败:', response.msg);
          this.handlePollingError();
        }
      } catch (error) {
        console.error('刷新状态失败:', error);
        this.handlePollingError();
      } finally {
        this.statusLoading = false;
      }
    },

    // 处理轮询错误
    handlePollingError() {
      this.connectionErrors = (this.connectionErrors || 0) + 1;
      if (this.connectionErrors > 5) {
        this.stopStatusPolling();
        this.$message.warning('状态更新异常，已停止自动刷新');
      }
    },

    // 加载任务报告
    async loadMissionReport() {
      try {
        if (this.missionStats.mission_report) {
          this.missionReport = this.missionStats.mission_report;
          return;
        }

        const response = await stopDroneMission();
        if (response.code === 200 && response.data.report) {
          this.missionReport = response.data.report;
        } else {
          this.generateMissionReport();
        }
      } catch (error) {
        console.error('加载任务报告失败:', error);
        this.generateMissionReport();
      }
    }
  }
};
</script>

<style scoped lang="scss">
.drone-mission-container {
  padding: 20px;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(0, 80, 120, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(120, 0, 80, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 40%, rgba(0, 120, 80, 0.2) 0%, transparent 50%),
    linear-gradient(135deg, #0a0a0a 0%, #0f0f1a 30%, #0a0a14 70%, #050510 100%);
  min-height: calc(100vh - 84px);
  color: #ffffff;
  position: relative;
  overflow-x: hidden;
}

.tech-header-glow {
  height: 2px;
  background: linear-gradient(90deg,
    transparent,
    #00ffcc, #00ccff, #ff00cc,
    transparent);
  margin-bottom: 30px;
  animation: headerShimmer 3s infinite;
}

.tech-main-container {
  max-width: 1600px;
  margin: 0 auto;
}

.page-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 40px 20px;
  background:
    radial-gradient(ellipse at center, rgba(0, 40, 80, 0.4) 0%, transparent 70%),
    linear-gradient(135deg, rgba(10, 20, 40, 0.9) 0%, rgba(5, 15, 30, 0.95) 100%);
  border-radius: 20px;
  position: relative;
  border: 1px solid rgba(0, 255, 255, 0.1);
  box-shadow:
    0 0 50px rgba(0, 100, 255, 0.3),
    inset 0 0 50px rgba(0, 50, 100, 0.2);

  .header-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
      transparent,
      #00ffcc, #00ccff, #ff00cc, #00ffcc,
      transparent);
    animation: shimmer 3s infinite;
  }

  .page-title {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #00ffcc, #00ccff, #ff00cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
    animation: titleGlow 4s ease-in-out infinite;
  }

  .page-subtitle {
    font-size: 16px;
    color: #aaccff;
    margin: 0;
    text-shadow: 0 0 10px rgba(170, 204, 255, 0.3);
  }
}

/* 环境监测中心横条样式 */
.environment-bar {
  margin-bottom: 25px;

  .card-header-tech {
    .header-content {
      .environment-actions {
        display: flex;
        align-items: center;
        gap: 15px;

        .location-select {
          width: 160px;

          ::v-deep .el-input__inner {
            background: rgba(10, 15, 30, 0.6);
            border: 1px solid rgba(0, 150, 255, 0.3);
            color: #ccddff;
            border-radius: 6px;

            &:focus {
              border-color: #00ccff;
            }
          }

          ::v-deep .el-select-dropdown {
            background: rgba(20, 25, 45, 0.95);
            border: 1px solid rgba(0, 150, 255, 0.3);
            backdrop-filter: blur(10px);

            .el-select-dropdown__item {
              color: #ccddff;

              &:hover {
                background: rgba(0, 150, 255, 0.2);
              }

              &.selected {
                color: #00ccff;
                background: rgba(0, 150, 255, 0.1);
              }
            }
          }
        }
      }
    }
  }

  .card-content {
    padding: 20px 25px;
  }

  .environment-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
  }

  .weather-section {
    display: flex;
    align-items: center;
    gap: 30px;
    flex: 1;

    .weather-main {
      display: flex;
      align-items: center;
      gap: 30px;
      width: 100%;
    }

    .temperature-display {
      display: flex;
      flex-direction: column;
      align-items: center;

      .temperature-value {
        font-size: 32px;
        font-weight: 700;
        color: #00ccff;
        line-height: 1;
      }

      .weather-description {
        text-align: center;
        margin-top: 8px;

        .comfort-index {
          color: #ccddff;
          font-size: 12px;
          margin-bottom: 4px;
        }

        .disaster-risk {
          padding: 4px 8px;
          border-radius: 12px;
          font-size: 11px;
          font-weight: 600;

          &.risk-none {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
          }

          &.risk-low {
            background: rgba(255, 204, 0, 0.2);
            color: #ffcc00;
          }

          &.risk-medium {
            background: rgba(255, 165, 0, 0.2);
            color: #ffa500;
          }

          &.risk-high {
            background: rgba(255, 68, 68, 0.2);
            color: #ff4444;
          }
        }
      }
    }

    .weather-details {
      display: flex;
      gap: 20px;

      .weather-item {
        display: flex;
        align-items: center;
        gap: 8px;

        .weather-icon {
          font-size: 18px;
          color: #00ccff;
          width: 24px;
        }

        .weather-info {
          .weather-label {
            color: #8899cc;
            font-size: 11px;
            margin-bottom: 2px;
          }

          .weather-value {
            color: #ccddff;
            font-weight: 600;
            font-size: 14px;
          }
        }
      }
    }

    .environment-indicators {
      display: flex;
      gap: 20px;

      .env-indicator {
        display: flex;
        align-items: center;
        gap: 10px;

        .indicator-label {
          color: #8899cc;
          font-size: 11px;
          white-space: nowrap;
        }

        .indicator-progress {
          width: 80px;
        }

        .indicator-value {
          color: #ccddff;
          font-weight: 600;
          font-size: 12px;
          min-width: 30px;
        }

        .aqi-indicator {
          padding: 4px 8px;
          border-radius: 6px;
          font-size: 11px;
          font-weight: 600;

          &.aqi-good {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
            border: 1px solid rgba(0, 255, 136, 0.3);
          }

          &.aqi-moderate {
            background: rgba(255, 204, 0, 0.2);
            color: #ffcc00;
            border: 1px solid rgba(255, 204, 0, 0.3);
          }

          &.aqi-unhealthy-sensitive {
            background: rgba(255, 165, 0, 0.2);
            color: #ffa500;
            border: 1px solid rgba(255, 165, 0, 0.3);
          }

          &.aqi-unhealthy {
            background: rgba(255, 68, 68, 0.2);
            color: #ff4444;
            border: 1px solid rgba(255, 68, 68, 0.3);
          }
        }
      }
    }

    .weather-loading {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #8899cc;

      i {
        font-size: 18px;
      }
    }
  }

  .divider {
    width: 1px;
    height: 60px;
    background: rgba(0, 150, 255, 0.2);
  }

  .alerts-section {
    flex: 0 0 350px;

    .section-subtitle {
      color: #ccddff;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 600;
    }

    .alerts-container {
      max-height: 80px;
      overflow-y: auto;

      .alert-item {
        background: rgba(10, 15, 30, 0.6);
        border-radius: 8px;
        border: 1px solid rgba(0, 150, 255, 0.2);
        margin-bottom: 8px;
        overflow: hidden;

        &.alert-low {
          border-left: 3px solid #ffcc00;
        }

        &.alert-medium {
          border-left: 3px solid #ffa500;
        }

        &.alert-high {
          border-left: 3px solid #ff4444;
        }

        .alert-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 6px 10px;
          background: rgba(0, 40, 80, 0.4);

          .alert-type {
            color: #ccddff;
            font-weight: 600;
            font-size: 12px;
          }

          .alert-level {
            padding: 2px 6px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: 600;

            &.alert-low {
              background: rgba(255, 204, 0, 0.2);
              color: #ffcc00;
            }

            &.alert-medium {
              background: rgba(255, 165, 0, 0.2);
              color: #ffa500;
            }

            &.alert-high {
              background: rgba(255, 68, 68, 0.2);
              color: #ff4444;
            }
          }
        }

        .alert-content {
          padding: 6px 10px;

          .alert-location {
            display: flex;
            align-items: center;
            color: #00ccff;
            font-size: 10px;
            margin-bottom: 2px;

            i {
              margin-right: 4px;
            }
          }

          .alert-description {
            color: #ccddff;
            font-size: 10px;
            line-height: 1.2;
            margin-bottom: 2px;
          }

          .alert-time {
            color: #8899cc;
            font-size: 9px;
          }
        }
      }
    }

    .no-alerts {
      .empty-state {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px;

        .empty-icon {
          font-size: 20px;
          color: #00ff88;
        }

        .empty-text {
          color: #8899cc;
          font-size: 12px;
        }
      }
    }
  }
}

.tech-card {
  background: rgba(20, 25, 45, 0.7);
  border-radius: 16px;
  border: 1px solid rgba(0, 150, 255, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  margin-bottom: 25px;

  .card-header-tech {
    background: linear-gradient(135deg, rgba(0, 40, 80, 0.4) 0%, rgba(0, 20, 40, 0.6) 100%);
    border-bottom: 1px solid rgba(0, 150, 255, 0.2);
    padding: 15px 25px;

    .header-content {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-section {
        display: flex;
        align-items: center;

        .title-icon {
          font-size: 18px;
          color: #00ccff;
          margin-right: 10px;
        }

        .card-title {
          color: #ccddff;
          margin: 0;
          font-size: 16px;
          font-weight: 600;
        }
      }
    }
  }

  .card-content {
    padding: 20px;
  }
}

.glow-button {
  background: linear-gradient(135deg, #00ffcc, #00ccff) !important;
  border: none !important;
  color: #0a0a0a !important;
  font-weight: 600 !important;
  box-shadow: 0 0 15px rgba(0, 255, 204, 0.5) !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.8) !important;
  }

  &:disabled {
    background: #6677aa !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

.reset-button {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-2px);
  }
}

.tech-primary-btn {
  background: linear-gradient(135deg, #00ccff, #0099ff) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 204, 255, 0.4) !important;
  }
}

.tech-secondary-btn {
  background: rgba(102, 119, 170, 0.3) !important;
  border: 1px solid rgba(102, 119, 170, 0.5) !important;
  color: #ccddff !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;

  &:hover {
    background: rgba(102, 119, 170, 0.5) !important;
    border-color: #8899cc !important;
  }
}

.tech-warning-btn {
  background: linear-gradient(135deg, #ffcc00, #ffaa00) !important;
  border: none !important;
  color: white !important;
  border-radius: 8px !important;
  transition: all 0.3s ease !important;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.4) !important;
  }
}

.status-card {
  .test-section {
    margin-bottom: 25px;

    .section-subtitle {
      color: #ccddff;
      margin-bottom: 12px;
      font-size: 14px;
      font-weight: 600;
    }

    .test-buttons {
      display: flex;
      gap: 10px;
    }
  }

  .drone-status-tech {
    margin-bottom: 25px;

    .status-grid {
      display: grid;
      gap: 15px;
    }

    .status-item {
      display: flex;
      align-items: center;
      padding: 15px;
      background: rgba(10, 15, 30, 0.6);
      border-radius: 12px;
      border: 1px solid rgba(0, 150, 255, 0.2);

      .status-icon {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        background: rgba(0, 150, 255, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;

        i {
          font-size: 20px;
          color: #00ccff;

          &.connected {
            color: #00ff88;
          }

          &.high { color: #00ff88; }
          &.medium { color: #ffcc00; }
          &.low { color: #ff4444; }
        }
      }

      .status-info {
        flex: 1;

        .status-label {
          color: #8899cc;
          font-size: 12px;
          margin-bottom: 4px;
        }

        .status-value {
          color: #ccddff;
          font-weight: 600;

          &.connected {
            color: #00ff88;
          }
        }

        .battery-display {
          display: flex;
          align-items: center;
          gap: 10px;

          .battery-progress {
            flex: 1;
          }

          .battery-percent {
            color: #ccddff;
            font-weight: 600;
            min-width: 40px;
          }
        }

        .gps-signal {
          display: flex;
          align-items: center;
          gap: 10px;

          .signal-bars {
            display: flex;
            align-items: end;
            gap: 2px;
            height: 16px;

            .signal-bar {
              width: 4px;
              background: #6677aa;
              border-radius: 1px;
              transition: all 0.3s ease;

              &.active {
                background: #00ff88;
              }

              &:nth-child(1) { height: 4px; }
              &:nth-child(2) { height: 8px; }
              &:nth-child(3) { height: 12px; }
              &:nth-child(4) { height: 16px; }
            }
          }

          .signal-value {
            color: #ccddff;
            font-size: 12px;
          }
        }
      }
    }
  }

  .mission-control-tech {
    .control-buttons {
      display: grid;
      gap: 10px;
      margin-bottom: 20px;
    }

    .tech-divider {
      border-color: rgba(0, 150, 255, 0.2);
      margin: 20px 0;
    }

    .flight-suitability {
      margin: 20px 0;

      .suitability-card {
        display: flex;
        align-items: center;
        padding: 15px;
        border-radius: 12px;
        border: 1px solid;
        background: rgba(10, 15, 30, 0.6);

        &.suitable {
          border-color: rgba(0, 255, 136, 0.3);
          background: rgba(0, 255, 136, 0.1);
        }

        &.not-suitable {
          border-color: rgba(255, 68, 68, 0.3);
          background: rgba(255, 68, 68, 0.1);
        }

        .suitability-icon {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          font-size: 20px;

          .suitable & {
            background: rgba(0, 255, 136, 0.2);
            color: #00ff88;
          }

          .not-suitable & {
            background: rgba(255, 68, 68, 0.2);
            color: #ff4444;
          }
        }

        .suitability-content {
          flex: 1;

          .suitability-status {
            font-weight: 600;
            margin-bottom: 5px;

            .suitable & {
              color: #00ff88;
            }

            .not-suitable & {
              color: #ff4444;
            }
          }

          .suitability-reasons {
            .reason-item {
              color: #ccddff;
              font-size: 12px;
              margin-bottom: 2px;
            }
          }
        }
      }
    }

    .mission-buttons {
      display: grid;
      gap: 10px;
    }
  }
}

.stats-card {
  .stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
  }

  .stat-item-tech {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(10, 15, 30, 0.6);
    border-radius: 12px;
    border: 1px solid rgba(0, 150, 255, 0.2);

    .stat-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      background: linear-gradient(135deg, #00ccff, #0099ff);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 15px;

      i {
        font-size: 20px;
        color: white;
      }
    }

    .stat-content {
      .stat-value {
        color: #ffffff;
        font-size: 24px;
        font-weight: 700;
        line-height: 1;
      }

      .stat-label {
        color: #8899cc;
        font-size: 12px;
        margin-top: 4px;
      }
    }
  }
}

.monitor-card {
  .weather-alert-tech {
    display: flex;
    align-items: center;
    padding: 15px;
    background: rgba(255, 204, 0, 0.1);
    border: 1px solid rgba(255, 204, 0, 0.3);
    border-radius: 12px;
    margin-bottom: 20px;

    .alert-icon {
      font-size: 20px;
      color: #ffcc00;
      margin-right: 12px;
    }

    .alert-text {
      .alert-title {
        color: #ffcc00;
        font-weight: 600;
        margin-bottom: 2px;
      }

      .alert-desc {
        color: #ccddff;
        font-size: 12px;
      }
    }
  }

  .mission-active-tech {
    .mission-alert {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: rgba(0, 255, 136, 0.1);
      border: 1px solid rgba(0, 255, 136, 0.3);
      border-radius: 12px;
      margin-bottom: 25px;

      .alert-content {
        display: flex;
        align-items: center;

        .alert-icon {
          font-size: 24px;
          color: #00ff88;
          margin-right: 12px;
        }

        .alert-text {
          .alert-title {
            color: #00ff88;
            font-weight: 600;
            margin-bottom: 2px;
          }

          .alert-desc {
            color: #aaccff;
            font-size: 12px;
          }
        }
      }

      .mission-timer {
        display: flex;
        align-items: center;
        gap: 8px;
        color: #00ff88;
        font-weight: 600;
        font-size: 18px;

        i {
          font-size: 20px;
        }
      }
    }

    /* 实时检测结果样式优化 */
    .realtime-results-tech {
      .detection-result-tech {
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 20px;
        margin-bottom: 25px;

        .detection-image-tech {
          position: relative;
          border-radius: 12px;
          overflow: hidden;
          border: 2px solid rgba(0, 150, 255, 0.3);

          .result-image {
            width: 100%;
            height: 200px;
            object-fit: cover;
            display: block;
          }

          .image-overlay-tech {
            position: absolute;
            top: 10px;
            right: 10px;

            .detection-count-badge {
              background: rgba(0, 0, 0, 0.7);
              color: white;
              padding: 6px 12px;
              border-radius: 20px;
              font-size: 12px;
              backdrop-filter: blur(10px);

              i {
                margin-right: 4px;
                color: #00ff88;
              }
            }
          }
        }

        .detection-info-tech {
          .info-card {
            background: rgba(10, 15, 30, 0.6);
            border-radius: 12px;
            border: 1px solid rgba(0, 150, 255, 0.2);
            padding: 20px;

            h5 {
              color: #ccddff;
              margin-bottom: 15px;
              font-size: 16px;
              font-weight: 600;
              border-bottom: 1px solid rgba(0, 150, 255, 0.2);
              padding-bottom: 8px;
            }

            .info-grid {
              display: grid;
              gap: 12px;

              .info-item {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .info-label {
                  color: #8899cc;
                  font-size: 13px;
                }

                .info-value {
                  color: #ccddff;
                  font-weight: 600;
                  font-size: 13px;
                }
              }
            }
          }
        }
      }
    }
  }
}

/* 高级报告样式 */
.report-card {
  .card-header-tech {
    .header-content {
      .report-actions {
        display: flex;
        gap: 10px;
      }
    }
  }

  .mission-report-tech {
    .report-summary-tech {
      margin-bottom: 30px;

      .summary-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        .report-date {
          color: #8899cc;
          font-size: 12px;
        }
      }

      .summary-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 15px;
      }

      .summary-item-tech {
        display: flex;
        align-items: center;
        padding: 20px;
        background: linear-gradient(135deg, rgba(0, 40, 80, 0.4), rgba(0, 20, 40, 0.6));
        border-radius: 16px;
        border: 1px solid rgba(0, 150, 255, 0.3);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 10px 30px rgba(0, 100, 255, 0.3);
          border-color: rgba(0, 255, 255, 0.5);
        }

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: -100%;
          width: 100%;
          height: 100%;
          background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
          transition: left 0.5s;
        }

        &:hover::before {
          left: 100%;
        }

        .summary-icon {
          width: 50px;
          height: 50px;
          border-radius: 12px;
          background: linear-gradient(135deg, #00ccff, #0099ff);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 15px;
          box-shadow: 0 4px 15px rgba(0, 204, 255, 0.4);

          i {
            font-size: 24px;
            color: white;
          }
        }

        .summary-content {
          .summary-value {
            color: #ffffff;
            font-size: 28px;
            font-weight: 800;
            line-height: 1;
            background: linear-gradient(135deg, #00ffcc, #00ccff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
          }

          .summary-label {
            color: #aaccff;
            font-size: 13px;
            margin-top: 6px;
            font-weight: 500;
          }
        }
      }
    }

    .environment-section {
      margin-bottom: 30px;
      padding: 25px;
      background: linear-gradient(135deg, rgba(0, 40, 80, 0.3), rgba(0, 20, 40, 0.5));
      border-radius: 16px;
      border: 1px solid rgba(0, 150, 255, 0.2);

      .environment-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;

        .env-metric {
          background: rgba(10, 15, 30, 0.6);
          border: 1px solid rgba(0, 150, 255, 0.2);
          border-radius: 12px;
          padding: 20px;
          transition: all 0.3s ease;

          &:hover {
            border-color: rgba(0, 255, 255, 0.4);
            transform: translateY(-2px);
          }

          .env-label {
            color: #8899cc;
            font-size: 13px;
            margin-bottom: 10px;
            font-weight: 500;
          }

          .env-value {
            color: #ccddff;
            font-weight: 600;
            font-size: 16px;

            &.risk-none {
              color: #00ff88;
              text-shadow: 0 0 10px rgba(0, 255, 136, 0.3);
            }
            &.risk-low {
              color: #ffcc00;
              text-shadow: 0 0 10px rgba(255, 204, 0, 0.3);
            }
            &.risk-medium {
              color: #ffa500;
              text-shadow: 0 0 10px rgba(255, 165, 0, 0.3);
            }
            &.risk-high {
              color: #ff4444;
              text-shadow: 0 0 10px rgba(255, 68, 68, 0.3);
            }
          }
        }
      }
    }

    .pest-heatmap-section {
      margin-bottom: 30px;

      .heatmap-container {
        display: flex;
        gap: 25px;
        align-items: start;

        .heatmap-tech {
          .heatmap-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            grid-template-rows: repeat(5, 1fr);
            gap: 8px;
            width: 320px;
            height: 320px;
            background: linear-gradient(135deg, rgba(0, 40, 80, 0.4), rgba(0, 20, 40, 0.6));
            border-radius: 16px;
            padding: 20px;
            border: 1px solid rgba(0, 150, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

            .heatmap-cell {
              border-radius: 8px;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: all 0.3s ease;
              cursor: pointer;
              border: 1px solid rgba(255, 255, 255, 0.1);
              position: relative;
              overflow: hidden;

              &:hover {
                transform: scale(1.15);
                z-index: 10;
                box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
              }

              .cell-content {
                text-align: center;
                z-index: 2;
              }

              .cell-value {
                color: white;
                font-size: 12px;
                font-weight: 700;
                text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
                margin-bottom: 2px;
              }

              .cell-pest {
                color: rgba(255, 255, 255, 0.9);
                font-size: 9px;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
              }

              &.level-1 {
                background: linear-gradient(135deg, rgba(0, 255, 136, 0.4), rgba(76, 175, 80, 0.6));
                border-color: rgba(0, 255, 136, 0.3);
              }
              &.level-2 {
                background: linear-gradient(135deg, rgba(255, 204, 0, 0.5), rgba(255, 193, 7, 0.7));
                border-color: rgba(255, 204, 0, 0.4);
              }
              &.level-3 {
                background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), rgba(244, 67, 54, 0.8));
                border-color: rgba(255, 165, 0, 0.5);
              }
              &.level-4 {
                background: linear-gradient(135deg, rgba(255, 69, 0, 0.7), rgba(229, 57, 53, 0.9));
                border-color: rgba(255, 69, 0, 0.6);
              }
              &.level-5 {
                background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(211, 47, 47, 1));
                border-color: rgba(255, 0, 0, 0.7);
                animation: pulse 2s infinite;
              }
            }
          }
        }

        .heatmap-legend {
          background: linear-gradient(135deg, rgba(0, 40, 80, 0.4), rgba(0, 20, 40, 0.6));
          border: 1px solid rgba(0, 150, 255, 0.3);
          border-radius: 16px;
          padding: 25px;
          min-width: 180px;
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

          .legend-title {
            color: #ccddff;
            font-weight: 600;
            margin-bottom: 20px;
            font-size: 16px;
            text-align: center;
          }

          .legend-items {
            display: grid;
            gap: 12px;
          }

          .legend-item {
            display: flex;
            align-items: center;
            gap: 15px;

            .legend-color {
              width: 30px;
              height: 30px;
              border-radius: 8px;
              border: 1px solid rgba(255, 255, 255, 0.2);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

              .legend-level {
                color: white;
                font-size: 11px;
                font-weight: 700;
                text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
              }

              &.level-1 {
                background: linear-gradient(135deg, rgba(0, 255, 136, 0.4), rgba(76, 175, 80, 0.6));
              }
              &.level-2 {
                background: linear-gradient(135deg, rgba(255, 204, 0, 0.5), rgba(255, 193, 7, 0.7));
              }
              &.level-3 {
                background: linear-gradient(135deg, rgba(255, 165, 0, 0.6), rgba(244, 67, 54, 0.8));
              }
              &.level-4 {
                background: linear-gradient(135deg, rgba(255, 69, 0, 0.7), rgba(229, 57, 53, 0.9));
              }
              &.level-5 {
                background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(211, 47, 47, 1));
              }
            }

            .legend-label {
              color: #ccddff;
              font-size: 13px;
              flex: 1;
              font-weight: 500;
            }
          }
        }
      }
    }

    /* 任务执行详情样式优化 */
    .report-details {
      .tech-collapse {
        ::v-deep .el-collapse-item__header {
          background: rgba(10, 15, 30, 0.6);
          border: 1px solid rgba(0, 150, 255, 0.2);
          border-radius: 8px;
          color: #ccddff;
          font-weight: 600;
          padding: 0 15px;
          margin-bottom: 10px;

          &:hover {
            background: rgba(10, 15, 30, 0.8);
          }
        }

        ::v-deep .el-collapse-item__wrap {
          background: transparent;
          border: none;
        }

        ::v-deep .el-collapse-item__content {
          padding: 20px;
          background: rgba(10, 15, 30, 0.4);
          border-radius: 8px;
          border: 1px solid rgba(0, 150, 255, 0.2);
          margin-bottom: 15px;
        }

        .detail-content {
          .detail-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid rgba(0, 150, 255, 0.1);

            &:last-child {
              border-bottom: none;
            }

            .detail-label {
              color: #8899cc;
              font-size: 14px;
            }

            .detail-value {
              color: #ccddff;
              font-weight: 600;
              font-size: 14px;
            }
          }
        }

        .pest-analysis {
          display: grid;
          grid-template-columns: 2fr 1fr;
          gap: 20px;

          .analysis-chart {
            .chart-container {
              background: rgba(10, 15, 30, 0.6);
              border-radius: 12px;
              padding: 20px;
              border: 1px solid rgba(0, 150, 255, 0.2);

              .pest-chart {
                display: flex;
                align-items: end;
                height: 200px;
                gap: 15px;
                justify-content: center;

                .pest-bar {
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  width: 40px;
                  transition: all 0.3s ease;
                  border-radius: 4px 4px 0 0;

                  &.low {
                    background: linear-gradient(to top, rgba(0, 255, 136, 0.6), rgba(0, 255, 136, 0.8));
                  }

                  &.medium {
                    background: linear-gradient(to top, rgba(255, 204, 0, 0.6), rgba(255, 204, 0, 0.8));
                  }

                  &.high {
                    background: linear-gradient(to top, rgba(255, 68, 68, 0.6), rgba(255, 68, 68, 0.8));
                  }

                  .bar-value {
                    color: white;
                    font-weight: 700;
                    margin-bottom: 5px;
                    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
                  }

                  .bar-label {
                    color: #ccddff;
                    font-size: 11px;
                    margin-top: 5px;
                    text-align: center;
                  }
                }
              }
            }
          }

          .analysis-summary {
            h5 {
              color: #ccddff;
              margin-bottom: 15px;
              font-size: 16px;
              font-weight: 600;
            }

            .threat-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 8px 0;
              border-bottom: 1px solid rgba(0, 150, 255, 0.1);

              .threat-name {
                color: #ccddff;
                font-size: 13px;
              }

              .threat-count {
                color: #ffcc00;
                font-weight: 600;
                font-size: 13px;
              }
            }
          }
        }

        .environment-analysis {
          .weather-stats {
            margin-bottom: 25px;

            h5 {
              color: #ccddff;
              margin-bottom: 15px;
              font-size: 16px;
              font-weight: 600;
            }

            .stats-grid {
              display: grid;
              grid-template-columns: repeat(2, 1fr);
              gap: 15px;

              .stat-item {
                background: rgba(10, 15, 30, 0.6);
                border-radius: 8px;
                border: 1px solid rgba(0, 150, 255, 0.2);
                padding: 15px;

                .stat-label {
                  color: #8899cc;
                  font-size: 12px;
                  margin-bottom: 5px;
                }

                .stat-value {
                  color: #ccddff;
                  font-weight: 600;
                  font-size: 16px;
                }
              }
            }
          }

          .risk-assessment {
            h5 {
              color: #ccddff;
              margin-bottom: 15px;
              font-size: 16px;
              font-weight: 600;
            }

            .risk-level {
              display: inline-block;
              padding: 8px 16px;
              border-radius: 20px;
              font-weight: 600;
              margin-bottom: 15px;

              &.risk-none {
                background: rgba(0, 255, 136, 0.2);
                color: #00ff88;
                border: 1px solid rgba(0, 255, 136, 0.3);
              }

              &.risk-low {
                background: rgba(255, 204, 0, 0.2);
                color: #ffcc00;
                border: 1px solid rgba(255, 204, 0, 0.3);
              }

              &.risk-medium {
                background: rgba(255, 165, 0, 0.2);
                color: #ffa500;
                border: 1px solid rgba(255, 165, 0, 0.3);
              }

              &.risk-high {
                background: rgba(255, 68, 68, 0.2);
                color: #ff4444;
                border: 1px solid rgba(255, 68, 68, 0.3);
              }
            }

            .risk-factors {
              margin-bottom: 15px;

              .risk-factor {
                color: #ccddff;
                font-size: 13px;
                margin-bottom: 5px;
              }
            }

            .risk-assessment-text {
              color: #aaccff;
              font-size: 14px;
              line-height: 1.5;
              background: rgba(10, 15, 30, 0.6);
              border-radius: 8px;
              padding: 15px;
              border: 1px solid rgba(0, 150, 255, 0.2);
            }
          }
        }

        .health-assessment {
          display: grid;
          grid-template-columns: 1fr 2fr;
          gap: 30px;
          align-items: center;

          .health-score {
            display: flex;
            justify-content: center;

            .score-circle {
              width: 120px;
              height: 120px;
              border-radius: 50%;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: relative;

              .score-value {
                color: #ffffff;
                font-size: 24px;
                font-weight: 800;
                line-height: 1;
              }

              .score-label {
                color: #aaccff;
                font-size: 12px;
                margin-top: 5px;
              }
            }
          }

          .health-factors {
            .factor-item {
              margin-bottom: 15px;

              .factor-name {
                display: block;
                color: #8899cc;
                font-size: 13px;
                margin-bottom: 5px;
              }

              ::v-deep .el-progress {
                .el-progress-bar {
                  padding-right: 0;

                  .el-progress-bar__outer {
                    background: rgba(10, 15, 30, 0.6);
                    border-radius: 10px;

                    .el-progress-bar__inner {
                      border-radius: 10px;
                    }
                  }
                }

                .el-progress__text {
                  color: #ccddff;
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }

    .recommendations-tech {
      margin-top: 30px;
      padding: 25px;
      background: linear-gradient(135deg, rgba(0, 40, 80, 0.3), rgba(0, 20, 40, 0.5));
      border-radius: 16px;
      border: 1px solid rgba(0, 150, 255, 0.2);

      .recommendations-grid {
        display: grid;
        gap: 15px;
      }

      .recommendation-item {
        display: flex;
        align-items: flex-start;
        padding: 15px;
        background: rgba(10, 15, 30, 0.6);
        border-radius: 12px;
        border: 1px solid rgba(0, 150, 255, 0.2);
        transition: all 0.3s ease;

        &:hover {
          border-color: rgba(0, 255, 255, 0.4);
          transform: translateX(5px);
        }

        .rec-icon {
          color: #00ccff;
          font-size: 18px;
          margin-right: 12px;
          margin-top: 2px;
        }

        .rec-content {
          color: #ccddff;
          font-size: 14px;
          line-height: 1.5;
          flex: 1;
        }
      }

      .no-recommendations {
        text-align: center;
        padding: 30px;

        .no-rec-icon {
          font-size: 48px;
          color: #00ff88;
          margin-bottom: 15px;
        }

        .no-rec-text {
          color: #8899cc;
          font-size: 14px;
        }
      }
    }
  }
}

.heatmap-tooltip {
  position: fixed;
  background: rgba(20, 25, 45, 0.95);
  border: 1px solid rgba(0, 150, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  backdrop-filter: blur(10px);
  z-index: 9999;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);

  .tooltip-content {
    .tooltip-title {
      color: #00ccff;
      font-weight: 600;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .tooltip-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;

      .tooltip-label {
        color: #8899cc;
        font-size: 12px;
      }

      .tooltip-value {
        color: #ccddff;
        font-weight: 500;
        font-size: 12px;
      }
    }
  }
}

.section-subtitle {
  color: #ccddff;
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: 600;
}

.help-btn-tech,
.refresh-btn-tech,
.export-btn-tech,
.share-btn-tech {
  color: #8899cc !important;
  background: transparent !important;
  border: none !important;

  &:hover {
    color: #00ccff !important;
  }
}

.stats-time {
  color: #8899cc;
  font-size: 12px;
}

@keyframes headerShimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@keyframes titleGlow {
  0%, 100% {
    text-shadow: 0 0 30px rgba(0, 255, 255, 0.5),
    0 0 60px rgba(0, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.8),
    0 0 80px rgba(0, 255, 255, 0.5),
    0 0 100px rgba(0, 255, 255, 0.3);
  }
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.8; }
  100% { opacity: 1; }
}

@media (max-width: 1200px) {
  .el-col-8, .el-col-16 {
    width: 100%;
  }

  .summary-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .heatmap-container {
    flex-direction: column !important;
  }

  .environment-content {
    flex-direction: column !important;
    gap: 20px !important;
  }

  .divider {
    width: 100% !important;
    height: 1px !important;
  }

  .alerts-section {
    flex: 1 !important;
    width: 100%;
  }
}

@media (max-width: 768px) {
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .heatmap-grid {
    width: 250px !important;
    height: 250px !important;
  }

  .detection-result-tech {
    grid-template-columns: 1fr !important;

    .detection-image-tech {
      .result-image {
        height: 150px !important;
      }
    }
  }

  .weather-main {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }

  .weather-details {
    flex-wrap: wrap;
    gap: 10px !important;
  }

  .environment-indicators {
    flex-direction: column !important;
    gap: 10px !important;
  }

  .environment-actions {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}
</style>

<style>
.tech-dialog .el-dialog {
  background: linear-gradient(135deg, rgba(20, 25, 45, 0.95) 0%, rgba(10, 15, 30, 0.98) 100%) !important;
  border: 1px solid rgba(0, 150, 255, 0.2) !important;
  border-radius: 16px !important;
  color: #ccddff !important;
}

.tech-dialog .el-dialog__header {
  background: linear-gradient(135deg, rgba(0, 40, 80, 0.4) 0%, rgba(0, 20, 40, 0.6) 100%) !important;
  border-bottom: 1px solid rgba(0, 150, 255, 0.2) !important;
}

.tech-dialog .el-dialog__title {
  color: #ccddff !important;
}

/* 全局样式调整，确保所有表格和详情区域使用暗色主题 */
.tech-table {
  background: rgba(10, 15, 30, 0.6) !important;

  ::v-deep .el-table__header {
    background: rgba(0, 40, 80, 0.4) !important;

    th {
      background: rgba(0, 40, 80, 0.4) !important;
      color: #ccddff !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.2) !important;
    }
  }

  ::v-deep .el-table__body {
    background: rgba(10, 15, 30, 0.6) !important;

    td {
      background: rgba(10, 15, 30, 0.6) !important;
      color: #ccddff !important;
      border-bottom: 1px solid rgba(0, 150, 255, 0.1) !important;
    }

    tr:hover td {
      background: rgba(0, 150, 255, 0.1) !important;
    }
  }
}

/* 确保所有表单元素使用暗色主题 */
.tech-input-field {
  ::v-deep .el-input__inner {
    background: rgba(10, 15, 30, 0.6) !important;
    border: 1px solid rgba(0, 150, 255, 0.3) !important;
    color: #ccddff !important;

    &:focus {
      border-color: #00ccff !important;
    }
  }

  ::v-deep .el-input-group__append {
    background: rgba(0, 40, 80, 0.4) !important;
    border: 1px solid rgba(0, 150, 255, 0.3) !important;
    color: #8899cc !important;
  }
}

.tech-slider {
  ::v-deep .el-slider__runway {
    background: rgba(10, 15, 30, 0.6) !important;
  }

  ::v-deep .el-slider__bar {
    background: linear-gradient(135deg, #00ccff, #0099ff) !important;
  }

  ::v-deep .el-slider__button {
    border: 2px solid #00ccff !important;
    background: rgba(10, 15, 30, 0.8) !important;
  }
}

.tech-radio-group {
  ::v-deep .el-radio__input.is-checked .el-radio__inner {
    background: #00ccff !important;
    border-color: #00ccff !important;
  }

  ::v-deep .el-radio__input.is-checked + .el-radio__label {
    color: #00ccff !important;
  }

  ::v-deep .el-radio__inner {
    background: rgba(10, 15, 30, 0.6) !important;
    border: 1px solid rgba(0, 150, 255, 0.3) !important;
  }

  ::v-deep .el-radio__label {
    color: #ccddff !important;
  }
}
</style>
